<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-20 17:10:01
 * @FilePath: \aster-flowable-uniapp\src\components\form\render\grid-layout.vue
 * @Description: 分栏布局
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <template v-for="(item, i) in _items" :key="i">
    <form-design-render
      v-for="subItem in item"
      v-model:value="_value[subItem.id]"
      :form-item="subItem"
      :form-data="_value"
      :mode="mode"
    />
  </template>
</template>
<script setup lang="ts">
  import { computed, PropType } from 'vue';
  import FormDesignRender from '@/components/form/form-design-render.vue';

  const emits = defineEmits(['update:value']);
  const props = defineProps({
    value: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: {},
    },
    mode: {
      type: String as PropType<'design' | 'form' | 'search' | 'table' | 'print'>,
      default: 'design',
    },
    formItem: {
      type: Object as PropType<WorkComponent.ComponentConfig>,
      default: {},
    },
    formData: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: () => {},
    },
    tableId: {
      type: String,
      default: '',
    },
    tableIndex: {
      type: Number,
      default: 0,
    },
    showLabel: {
      type: Boolean,
      default: true,
    },
  });

  /**
   * @description: 子组件
   * @return {*}
   */
  const _items = computed({
    get() {
      return props.formItem.props.items;
    },
    set(val) {
      props.formItem.props.items = val;
    },
  });

  /**
   * @description: 组件值
   */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emits('update:value', val);
    },
  });
</script>
<style scoped lang="scss"></style>
